$f: 19.2;

.home {
  // position: relative;
  width: 100%;
  .container{
    padding: 177/$f+vw 167/$f+vw 0 167/$f+vw;
    background: #F9F6F1;
    position: relative;
    .bg {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      overflow: hidden;
      max-height: 100%;
      img {
        display: block;
        max-height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
  
    .main {
      background: #FFF;
      width: 1400/$f+vw;
      padding: 60/$f+vw 131/$f+vw 80/$f+vw 131/$f+vw;
      position: relative;
      z-index: 10;
      margin: 0 auto;
  
  
      .c {
        width: 100%;
  
        .list {
          a {
            display: flex;
            justify-content: space-between;
            gap: 20/$f+vw;
            border-bottom: 1px solid #E4E4E4;
            padding: 40/$f+vw 0;
  
            .info {
              width: 70%;
  
              .p1 {
                color: #000;
                font-size: 26/$f+vw;
                font-weight: 700;
                transition: all 600ms;
              }
  
              .des {
                margin: 10/$f+vw 0 38/$f+vw 0;
                color: #999;
                font-size: 18/$f+vw;
                line-height: 1.6;
                transition: all 600ms;
              }
  
              .time {
                color: #999;
                font-size: 18/$f+vw;
                &:hover{
                  text-decoration: underline;
                }
              }
            }
  
            .pic {
              width: 30%;
              overflow: hidden;
  
              img {
                width: 100%;
                display: block;
                object-fit: cover;
                transition: all 600ms;
              }
            }
  
            &:hover {
              .info {
                .p1,.des {
                  color: #003982;
                }
              }
  
              .pic {
                img {
                  transform: scale(1.05);
                }
              }
            }
          }
  
          a:first-child {
            padding-top: 0;
          }
        }
  
        .pager {
          display: flex;
          justify-content: center;

          margin-top: 68/$f+vw;
          a {
            color: #999;
            font-size: 15/$f+vw;
            margin: 0 20/$f+vw;
            transition: all 600ms;
            &:hover{
              color: #000;
            }
          }
          .active{
            color: #000;
          }
        }
      }
  
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      padding: 20px 5% 60px 5%;
      .main{
        width: 100%;
        flex-direction: column;
        padding: 20px;
        .c{
          width: 100%;
          .list{
            a{
              flex-direction: column-reverse;
              padding: 15px 0;
              .info{
                width: 100%;
                margin-top: 10px;
                .p1{
                  font-size: 18px;
                }
                .des{
                  font-size: 16px;
                  margin: 8px 0 15px 0;
                }
                .time{
                  font-size: 16px;
                }
              }
              .pic{
                width: 100%;
              }
            }
          }
          .pager{
            margin-top: 20px;
            a{
              font-size: 14px;
              margin: 0 5px;
            }
          }
        }
      }
    }
  }
}